<template>
  <div class="customerlistX">
    <div class="top111">
      <img @click="fanhui" src="../assets/总图标包含整个系统的/fanhui.png" />

      <img
        class="aaaa"
        src="../assets/总图标包含整个系统的/fanhuishouye.png"
        @click="fanhuish"
      />
    </div>
    <div class="top">
      <div class="left">
        <img src="../assets/总图标包含整个系统的/头像男 拷贝 4.png" />
        <div class="t_l_box">
          <p>名称: {{ custName }}</p>
          <div>电话:{{ telephone }}</div>
        </div>
      </div>

      <div class="right" @click="clickfn">客户信息</div>
    </div>
    <div class="tow">
      <van-tabbar
        v-model="active"
        :fixed="Shut"
        @change="switchd"
        active-color="#003399"
      >
        <van-tabbar-item icon="printer">收入分析</van-tabbar-item>
        <van-tabbar-item icon="shop">旗下企业</van-tabbar-item>
        <van-tabbar-item icon="friends">合作伙伴</van-tabbar-item>
        <van-tabbar-item
          icon="gold-coin
"
          >当年收入</van-tabbar-item
        >
      </van-tabbar>
    </div>
    <!-- 收入 -->
    <div class="content" v-if="active == 0">
      <div class="con_box">
        <div class="c_top bor">
          <p>今年</p>
          <h4><span>￥</span> {{ year }}</h4>
        </div>
        <div class="c_top">
          <p>总收入</p>
          <h4><span>￥</span> {{ total }}</h4>
        </div>
      </div>
      <div class="figure">
        同比 <span>{{ contrast }}</span>
      </div>
      <div class="dotted">
        <div class="dott_left"></div>
        <div class="dott_right"></div>
      </div>
      <div class="income">
        <img src="../assets/总图标包含整个系统的/矢量智能对象 拷贝 2.png" />
        <span>{{ title }}</span>
      </div>
      <div class="cycle" v-for="(itme, index) in arr" :key="index">
        <span>{{ itme.year }}</span>
        <p>{{ itme.income }}</p>
      </div>

      <div class="bottom"></div>
    </div>
    <!-- 旗下 -->
    <div class="content" v-else-if="active == 1">
      <div class="contwo" v-for="(itme, index) in its" :key="index">
        <div class="two_lfte">
          <img src="../assets/总图标包含整个系统的/旗下企业-头像.png" />
          <div class="text">
            <span>企业: {{ itme.company }}</span>
            <p>注册时间: {{ itme.createTime }}</p>
            <p>法人: {{ itme.creator }}</p>
          </div>
        </div>
        <div class="two_right">
          <img src="../assets/总图标包含整个系统的/More.png" />
        </div>
      </div>
    </div>
    <!-- 合作 -->
    <div class="content" v-else-if="active == 2">
      <div class="contwo" v-for="(itme, index) in partner" :key="index">
        <div class="two_lfte">
          <img src="../assets/总图标包含整个系统的/旗下企业-头像.png" />
          <div class="text">
            <span>{{ itme.creator }}</span>
            <p>{{ itme.company }}</p>
            <p>成立时间 {{ itme.createTime }}</p>
          </div>
        </div>
        <div class="two_right">
          <img src="../assets/总图标包含整个系统的/More.png" />
        </div>
      </div>
    </div>
    <!-- 当年 -->
    <div class="contentx" v-else-if="active == 3">
      <div class="last" v-for="(itme, index) in last" :key="index">
        <div class="last_l">{{ itme.month }}月</div>
        <div class="last_r">{{ itme.income }}</div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { GetCourierKehuPingXZList } from "../request/aip";
export default {
  data() {
    return {
      id: "",
      // 当前导航栏索引
      active: 0,
      Shut: false,
      //   img: require("../assets/总图标包含整个系统的/形状 503.png"),
      //   名字
      custName: "",
      //   电话
      telephone: "",

      //  1 收入分析内用到得数据
      title: "",
      //   总比
      contrast: "",
      //列表数据
      arr: [],
      //   年收入
      year: "",
      //总收入
      total: "",
      //   旗下企业数据列表
      its: [],
      //   合作伙伴
      partner: [],
      //   当年收入
      last: [],
    };
  },
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    fanhuish() {
      this.$router.push("/index");
    },
    // 跳转点击编辑
    clickfn() {
      let id = this.id;
      this.$router.push({ name: "Customerlist", params: { id } });
    },
    switchd(index) {
      console.log(index);
    },
  },
  created() {
    console.log(this.$route.params.id);
    this.id = this.$route.params.id;
    GetCourierKehuPingXZList({ id: this.$route.params.id }).then((res) => {
      console.log(res);
      let rest = res.data;
      this.custName = rest.custName;
      this.telephone = rest.telephone;
      //   收入分析数据.datas[0]
      this.title = rest.datas[0].title;
      this.contrast = rest.datas[0].data.contrast;
      this.year = rest.datas[0].data.year;
      this.total = rest.datas[0].data.total;
      let att = rest.datas[0].data.list;
      this.arr = att.sort(function (a, b) {
        return b.year - a.year;
      });
      //   旗下企业数据 .datas[3]
      this.its = rest.datas[3].data;

      //   合作伙伴
      this.partner = rest.datas[2].data;

      //   当年收入
      this.last = rest.datas[1].data;
    });
  },
};
</script>
 
<style lang = "less" scoped>
.customerlistX {
  width: 100vw;
  height: 100vh;

  background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1112%2F05%2F2595812_DSC_0180.jpg&refer=http%3A%2F%2Fimg0.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621733692&t=a7b50f9425d1eb6af3b65baa39db6870")
    no-repeat center top;
  background-size: 100% 25%;
  background-color: #f5f5f5;
}
.top111 {
  background-color: #01009a;
  display: flex;
  justify-content: space-between;
  color: #fff;
  align-items: center;
  padding: 10px;
  img {
    width: 10px;
  }
  .aaaa {
    width: 20px;
  }
}
.top {
  width: 80%;
  background-color: #fff;
  margin: auto;
  border-radius: 10px 10px 0 0;
  padding: 10px 0 18px 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    img {
      width: 80px;
      margin-right: 10px;
    }
    .t_l_box {
      div {
        color: #ccc;
        font-size: 14px;
      }
    }
  }
  .right {
    background-color: #ffcc33;
    padding: 0 5px;
    color: #fff;
    height: 20px;
    border-radius: 20px 0 0 20px;
    font-size: 14px;
  }
}
.tow {
  background-color: #fff;
}
.content {
  background-color: #fff;
  width: 84%;
  /* height: 200px; */
  margin: 10px auto;
  padding: 20px 10px;
  /* 收入 */
  .con_box {
    display: flex;

    .c_top {
      flex: 1;
      padding-left: 10px;
      p {
        color: #ccc;
        margin-bottom: 5px;
      }
      h4 {
        font-size: 25px;
        color: #ffda70;
        font-weight: 400;

        span {
          font-size: 18px;
          font-weight: 400;
        }
      }
    }
    .bor {
      border-right: 2px solid #f5f5f5;
    }
  }
  .figure {
    background: url("../assets/总图标包含整个系统的/底框.png") no-repeat;
    height: 40px;
    width: 100px;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    color: #ccc;
    margin-bottom: 30px;
    span {
      color: #17429e;
    }
  }
  .dotted {
    border-bottom: 1px dashed #ccc;
    position: absolute;
    width: 84%;
    height: 0;
    .dott_left {
      width: 25px;
      height: 25px;
      border-radius: 50px;
      background-color: #f5f5f5;
      position: relative;
      left: -24px;
      top: -12px;
    }
    .dott_right {
      width: 25px;
      height: 25px;
      border-radius: 50px;
      background-color: #f5f5f5;
      position: relative;
      right: -314px;
      top: -38px;
    }
  }
  .income {
    display: flex;
    align-items: center;
    padding: 20px 0;

    img {
      width: 20px;
      margin-right: 10px;
    }
  }
  .cycle {
    border-top: 1px dashed #ccc;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    justify-content: space-between;
    span {
      color: #ccc;
    }
    p {
      color: #ffcc33;
    }
  }
  .bottom {
    border-bottom: 1px solid #ccc;
  }
  /* 旗下 */
  .contwo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
    .two_lfte {
      display: flex;
      align-items: center;
      img {
        width: 70px;
        margin-right: 10px;
      }
      .text {
        span {
          font-size: 14px;
        }
        p {
          font-size: 14px;
          color: #ccc;
          margin-top: 3px;
        }
      }
    }
  }
}
.contentx {
  /* background-color: #fff; */
  width: 90%;
  /* height: 200px; */
  margin: auto;
  padding: 10px 10px;
  .last {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 5px;
    .last_r {
      color: blue;
    }
  }
}
</style>